<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<graceNavBar
				class="nav-bar"
				:items="tabs"
				activeLineRadius="20rpx"
				activeDirection="center"
				textAlign="center"
				color="#969696"
				lineHeight="30rpx"
				activeLineWidth="60rpx"
				activeLineHeight="10rpx"
				activeLineBg="#FEDE33"
				:currentIndex="currentIndex"
				@change="navChange"
			></graceNavBar>
			<swiper :style="{ height: mainHeight + 'px' }" :current="currentIndex" @change="swiperChange">
				<swiper-item v-for="(topic, topicIndex) in topicList" :key="topicIndex">
					<scroll-view scroll-y :style="{ height: mainHeight + 'px' }" @scrolltolower="scrollend">
						<view class="empty-view grace-flex-center  grace-flex-vcenter grace-animate fadeIn" v-if="topic.list.length === 0">
							<image class="empty-img" mode="widthFix" src="../../static/image/nothing.png"></image>
						</view>
						<block v-for="(item, index) in topic.list" :key="index">
							<topic-list :item="item"></topic-list>
						</block>
						<graceLoading :loadingType="loadingTypes[topicIndex]"></graceLoading>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</gracePage>
</template>

<script>
	var graceJS = require('@/Grace.JS/grace.js');
	import TopicList from '../../components/topic-list/topic-list';
	export default {
		data() {
			return {
				currentIndex: 0,
				mainHeight: 500,
				tabs: ['推荐', '新闻', '音乐', '运动', '军事', '视频'],
				// 加载状态
				loadingTypes: [],
				// 每个选项卡对应的分页
				pages: [],
				newData: [
					{
						title: '淘宝记录簿',
						pic: '../../static/demo/topicpic/13.jpeg',
						desc: '120斤到85斤 我的反转人生',
						totalNum: 545,
						todayNum: 720
					},
					{
						title: '淘宝记录簿',
						pic: '../../static/demo/topicpic/13.jpeg',
						desc: '120斤到85斤 我的反转人生',
						totalNum: 545,
						todayNum: 720
					}
				],
				topicList: [
					{
						list: [
							{
								title: '淘宝记录簿',
								pic: '../../static/demo/topicpic/13.jpeg',
								desc: '120斤到85斤 我的反转人生',
								totalNum: 545,
								todayNum: 720
							},
							{
								title: '你亲身经历的灵异事件',
								pic: '../../static/demo/topicpic/14.jpeg',
								desc: '走出去，才发现你跟别人差的不是一点半点',
								totalNum: 545,
								todayNum: 720
							},
							{
								title: '天天大卡',
								pic: '../../static/demo/topicpic/9.jpeg',
								desc: '120斤到85斤 我的反转人生120斤到85斤 我的反转人生120斤到85斤 我的反转人生',
								totalNum: 545,
								todayNum: 720
							}
						]
					},
					{
						list: [
						{
							title: '淘宝记录簿',
							pic: '../../static/demo/topicpic/13.jpeg',
							desc: '120斤到85斤 我的反转人生',
							totalNum: 545,
							todayNum: 720
						},
						{
							title: '你亲身经历的灵异事件',
							pic: '../../static/demo/topicpic/14.jpeg',
							desc: '走出去，才发现你跟别人差的不是一点半点',
							totalNum: 545,
							todayNum: 720
						},
						{
							title: '天天大卡',
							pic: '../../static/demo/topicpic/9.jpeg',
							desc: '120斤到85斤 我的反转人生120斤到85斤 我的反转人生120斤到85斤 我的反转人生',
							totalNum: 545,
							todayNum: 720
						}
						]
					},
					{
						list: []
					},
					{
						list: []
					},
					{
						list: []
					},
					{
						list: []
					}
				]
			}
		},
		onReady() {
			this.mainHeight = graceJS.system().windowHeight - uni.upx2px(80);
			//加载分类信息 初始化数据
			this.getCate();
		},
		methods: {
			navChange(index) {
				this.currentIndex = index;
			},
			swiperChange(e) {
				let index = e.detail.current;
				this.currentIndex = index;
			},
			getCate() {
				for (var i = 0; i < this.tabs.length; i++) {
					this.pages.push(1);
					this.loadingTypes.push(3);
				}
			},
			scrollend() {
				// 判断加载状态避免多次滚动时有加载尚未完成
				if (this.loadingTypes[this.currentIndex] == 2 || this.loadingTypes[this.currentIndex] == 4) {
					return false;
				}
				this.loadMoreFunc();
			},
			//加载更多时执行的函数
			loadMoreFunc() {
				this.loadingTypes.splice(this.currentIndex, 1, 1);
				//追加数据(延迟1秒 模拟网络请求)
				setTimeout(() => {
					if (this.pages[this.currentIndex] > 3) {
						this.loadingTypes.splice(this.currentIndex, 1, 2);
						return;
					}
			
					this.newsList[this.currentIndex].list = this.newsList[this.currentIndex].list.concat(this.newData);
			
					// 页码增加
					this.pages[this.currentIndex]++;
					setTimeout(() => {
						this.loadingTypes.splice(this.currentIndex, 1, 3);
					}, 300);
				}, 1000);
			}
		},
		components: {
			TopicList
		}
	}
</script>

<style lang="stylus">
.nav-bar
	line-height 80rpx
	height 80rpx
.empty-view
	background #FFFFFF
	position absolute
	top 0
	bottom 0
	left 0
	right 0
	.empty-img
		width 40%
</style>
